* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

/* rgb(114,135,254)   rgb(130,88,186)

rgb(59,45,159)

rgb(95, 76, 194)

rgb(118,76,163)  rgb(92,103,211)

rgb(199, 191, 219)
rgb(237,221,22) */


body {
  background-image:url(../image/image.png);
background-size:100% 100%;
     
}

body .login-container {
  width: 7.5rem;
  height: 4rem;
  margin: 0 auto;
  margin-top: 20%;
  border-radius: 15px;
  
  background-color: rgb(150,194,36);
}

body .login-container .left-container {
  display: inline-block;
  height: 2.5rem;
  width: 4.125rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: .75rem;
  background-image: linear-gradient(to bottom right,rgb(150,194,36), rgb(84, 162, 122));
}

body .login-container .left-container .title {
  color: #fff;
  font-size: 38px;
  font-weight: 200;
}

body .login-container .left-container .title span {
  border-bottom: 3px solid rgb(237,221,22) ;
}

body .login-container .left-container .input-container {
  padding: 5px 0;
}
body .login-container .left-container .input-container1 {
  padding: .25rem 0;
  margin-top: .25rem;
}
body .login-container .left-container .input-container1 input {
  border: 0;
  background: none;
  outline: 0;
  font-family: "Microsoft YaHei";
  font-size: .35rem;
  color: #fff;
  margin: 0px 0;
  display: block;
  width: 100%;
  padding: 5px 0;
  transition: .2s;
  border-bottom: 1px solid rgb(255, 255, 255);
}

body .login-container .left-container .input-container1 input:hover {
  border-bottom-color: #fff;
}
body .login-container .left-container .input-container input {
  border: 0;
  background: none;
  outline: 0;
  font-family: "Microsoft YaHei";
  font-size: .35rem;
  color: #fff;
  margin: 0px 0;
  display: block;
  width: 100%;
  padding: 5px 0;
  transition: .2s;
  border-bottom: 1px solid rgb(255, 255, 255);
}

body .login-container .left-container .input-container input:hover {
  border-bottom-color: #fff;
}

::-webkit-input-placeholder {
  color: rgb(255, 255, 255);
}

body .login-container .left-container .message-container {
  font-size: 28px;
  transition: .2s;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

body .login-container .left-container .message-container:hover {
  color: #fff;
}

body .login-container .right-container {
  width: 1.8125rem;
  display: inline-block;
  height: calc(100% - 1.5rem);
  vertical-align: top;
  padding: .25rem 0;
}

body .login-container .right-container .regist-container {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 200;
}

body .login-container .right-container .regist-container input {
  border-bottom: 3px solid rgb(237,221,22) ;
}

body .login-container .right-container .actoin-container {
  font-size: 10px;
  color: #fff;
  height: 100%;
  position: relative;
}

body .login-container .right-container .actoin-container input {
  border: .0625rem solid rgba(70, 70, 4, 0);
  padding: .075rem;
  background: rgb(255, 255, 255);
  color: rgb(32, 32, 32);
  height: 1rem;
  width: 1.5rem;
  display: inline;
  font-size: .35rem;
  line-height: .3125rem;
  border-radius: .3125rem;
  position: absolute;
  bottom: .125rem;
  left: calc(.4rem - .3125rem);
  transition: .2s;
  cursor: pointer;
}

body .login-container .right-container .actoin-container input:hover {
  background-color: rgb(237,221,22);
  color: rgb(95, 76, 194);
}